<template>
  <el-row>
    <el-col  :push="1"  :span="2">
      <el-input v-model="FindProductForm.productName" style="width: 150px" placeholder="请输入产品名字"  @change="handleChangeproductName" />
    </el-col>
  
    <el-col  :push="2"  :span="2">
      <el-select v-model="FindProductForm.typeId" placeholder="请选择商品类型" @change="handleChangeproductType" style="width: 150px">
        <el-option
          v-for="item in ProductType"
          :key="item.typeId"
          :label="item.typeName"
          :value="item.typeId"
        />
      </el-select>
    </el-col>
  
    <el-col  :push="3"  :span="2">
      <el-select v-model="FindProductForm.typeName" placeholder="请选择商品类型名称" @change="handleChangeproductType" style="width: 150px">
        <el-option
          v-for="item in ProductType"
          :key="item.typeName"
          :label="item.typeName"
          :value="item.typeName"
        />
      </el-select>
    </el-col>
  
  
    <!-- <el-col  :push="4"  :span="2">
      <el-select v-model="FindProductForm.productState" placeholder="请选择商品状态" @change="changeproductState" style="width: 150px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-col> -->
  
  
  </el-row>
  
    <div class="product-list">
      <!-- 商品表格 -->
      <el-table :data="productList" style="width: 100%">
        <el-table-column prop="productId" label="产品ID" width="180"></el-table-column>
        <el-table-column prop="productName" label="产品名称" width="180"></el-table-column>
        <el-table-column prop="productPrice" label="价格" sortable></el-table-column>
        <el-table-column prop="typeName" label="类型名称"></el-table-column>
        <el-table-column prop="number" label="库存数量"></el-table-column>
        <el-table-column prop="describe" label="描述"></el-table-column>
        <el-table-column label="图片" width="150">
          <template #default="scope">
            <img :src="scope.row.picture" alt="Product Image" class="product-image" />
          </template>
        </el-table-column>
  
  
        <el-table-column label="操作" width="200">
      <template #default="scope">
  
        
        <el-button type="primary" @click="addcollectProduct(scope.row)">收藏</el-button>
        <el-button  type="success" @click="addShoppingCar(scope.row)">加入购物车</el-button>
        <!-- <el-button size="mini" @click="handleFavorite(scope.row)">收藏</el-button>
        <el-button size="mini" type="success" @click="handleAddToCart(scope.row)">加入购物车</el-button> -->
      </template>
    </el-table-column>
  
      </el-table>
  
  
  
      <!-- <el-dialog
                   title="我们将为你开启线下"
                   :visible.sync="isShow"
                   width="50%"
                   center
                   :modal="false">
  
   <span slot="footer" class="dialog-footer" >
                     <el-button @click="isShow= false" style="margin-top: 10px;">取 消</el-button>
                     <el-button type="primary" @click="add"   style="margin-top: 10px;">确 定</el-button>
                   </span>
                 </el-dialog> -->
  
  
                 <el-dialog
      v-model="isShow"
      title="请输入加购数量"
      width="500"
      :before-close="handleClose"
    >
      <span>
        <el-input v-model="AddShoppingCarForm.num" style="width: 150px" placeholder="请输入加购数量"  @change="handleChangeproductName" />
    </span>
  
  
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="add">
            确认添加
          </el-button>
        </div>
      </template>
    </el-dialog>
  
  
  
  
  
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="FindProductForm.pageForm.pageNo"
        :page-sizes="[2, 4, 8, 10]"
        :page-size.sync="FindProductForm.pageForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </template>
  <script>
  
  export default {
    name: 'ProductList',
    
    data() {
      return {
        productList: [], // 存储商品列表数据
        total: 0, // 总条目数
        FindProductForm: { // 查询表单数据
          pageForm: {
            pageNo: null, // 当前页码
            pageSize: null // 每页显示条目数
          },
          productName: null, // 商品名称过滤条件
          typeId: null, // 类型 ID 过滤条件
          typeName: null, // 类型名称过滤条件
          productState: null // 商品状态过滤条件
        },
        ProductType:{},
        options:[
    {
      value: '0',
      label: '上架',
    },
    {
      value: '1',
      label: '下架',
    }
  ],
  CollectProductForm:{
    productId:0,
    userId:null
  },
  AddShoppingCarForm:{
    productId:0,
    userId:null,
    num:1
  },
  isShow:false,
  number:1,
  
  
      };
    },
    methods: {
      add(){
          if(this.AddShoppingCarForm.num>this.number){
            alert("库存不足");
            return;
          }
          this.$http.post('/product/productTable/addShoppingCar',this.AddShoppingCarForm).then(resp=>{
            if(resp.data.code==200){
              alert(resp.data.message);
            }
            this.isShow=false;
            this.AddShoppingCarForm.num=1;
            this.AddShoppingCarForm.productId=0;
            this.AddShoppingCarForm.userId=null;
            this.number=1;
          })
      },
      addShoppingCar(obj){
        this.isShow=true
        this.AddShoppingCarForm.productId=obj.productId;
        this.number=obj.number;
      },
  
      addcollectProduct(obj){
        this.CollectProductForm.productId=obj.productId;
        this.$http.post('/product/productTable/collectProduct',this.CollectProductForm).then(resp=>{
          alert(resp.data.message);
        })
      },
  
      changeproductState(){
        this.FindProductForm.pageForm.pageNo = 1; // 重置页码为第一页
        this.fetchProducts(); // 重新获取商品列表
      },
      handleChangeproductType(){
        this.FindProductForm.pageForm.pageNo = 1; // 重置页码为第一页
        this.fetchProducts(); // 重新获取商品列表
  
      },
      handleChangeproductName() {
        this.FindProductForm.pageForm.pageNo = 1; // 重置页码为第一页
        this.fetchProducts(); // 重新获取商品列表
      },
  
  
  
      fetchProducts() {
        const params = this.buildParams(); // 构建查询参数
  
        this.$http.get('/product/productTable/findAllProduct', { params })
          .then(resp => {
            if (resp.data.success) {
              const data = resp.data.data;
              this.productList = data.list || []; // 更新商品列表
              this.total = data.total || 0; // 更新总条目数
            } else {
              console.error('获取商品列表失败:', resp.data.message);
            }
          })
          .catch(error => {
            console.error('获取商品列表失败:', error);
          });
      },
      buildParams() {
        return {
          'pageForm.pageNo': this.FindProductForm.pageForm.pageNo,
          'pageForm.pageSize': this.FindProductForm.pageForm.pageSize,
          productName: this.FindProductForm.productName,
          typeId: this.FindProductForm.typeId,
          typeName: this.FindProductForm.typeName,
          productState: this.FindProductForm.productState
        };
      },
      handleSizeChange(newSize) {
        this.FindProductForm.pageForm.pageSize = newSize;
        this.fetchProducts();
      },
      handleCurrentChange(newPage) {
        this.FindProductForm.pageForm.pageNo = newPage;
        this.fetchProducts();
      },
      getProductTypeList() {
        this.$http.get('/product/productType/selectProductType')
          .then(resp => {
          this.ProductType=resp.data.data
          })
      }
    },
    created() {
      this.fetchProducts(); // 组件创建时获取商品列表
      this.getProductTypeList();
    }
  };
  </script>
  
  <style scoped>
  .product-list {
    margin: 20px;
  }
  
  .product-image {
    max-width: 100%;
    height: auto;
    display: block;
  }
  </style>